<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: tomato;
            margin: 10px;
        }
    </style>
</head>
<body>
<div></div>
<div class="box"></div>
<div id="box"></div>
<div class="box"></div>
<div></div>

<script>
    //简单版
    // getEle("#box").style.backgroundColor = "lemonchiffon";

    // var claArr = getEle(".box");
    // for (var i = 0; i < claArr.length; i++) {
    //     claArr[i].style.backgroundColor = "yellow";
    // }
    // var divArr = getEle("div");
    // for (var i = 0; i < divArr.length; i++) {
    //     divArr[i].style.border = "2px solid #ddd";
    // }

    // //封装一个方法，然后判断第一个字符，如果是#用id，如果是.用className,否则用tagName
    // function getEle(str){
    //     var str1 = str.charAt(0);
    //     if (str1 ==="#") {
    //         return document.getElementById(str.slice(1));
    //     }else if (str1 ===".") {
    //         return document.getElementsByClassName(str.slice(1));
    //     }else{
    //         return document.getElementsByTagName(str);
    //     }
    // }

    //最终版
    $("#box").style.backgroundColor = "lemonchiffon";
    var claArr = $(".box");
    for (var i = 0; i < claArr.length; i++) {
        claArr[i].style.backgroundColor = "gold";
    }
    var divArr = $("div");
    for (var i = 0; i < divArr.length; i++) {
        divArr[i].style.border = "2px solid #ccc";
    }
    function $(str){
        var str1 = str.charAt(0);
        if (str1 ==="#") {
            return document.getElementById(str.slice(1));
        }else if (str1 ===".") {
            return document.getElementsByClassName(str.slice(1));
        }else{
            return document.getElementsByTagName(str);
        }
    }
</script>
</body>
</html>